<template>
  <div class="feedback-list pane-content">
      <el-dialog v-model="dialogVisible" title="反馈详情" width="50%">
          <div style="margin-bottom: 20px">
              <h4>反馈标题:{{ currentFeedback.title }}</h4>
              <p>反馈内容:{{ currentFeedback.content }}</p>
          </div>
          <el-input v-model="resolveText" :rows="4" type="textarea" placeholder="请输入处理意见" />
          <template #footer>
              <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">关闭</el-button>
                  <el-button type="primary" @click="handleResolve">
                      处理
                  </el-button>
              </span>
          </template>
      </el-dialog>
      <div class="pane-top">
          <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="type" label="类型" width="120">
                  <template #default='{ row }'>
                      <el-tag type="primary" class="mx-1" round v-if="row.type == '建议'">{{ row.type }}</el-tag>
                      <el-tag type="warning" class="mx-1" round v-if="row.type == '问题'">{{ row.type }}</el-tag>
                      <el-tag type="danger" class="mx-1" round v-if="row.type == '举报'">{{ row.type }}</el-tag>
                  </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="status" label="状态" width="120">
                  <template #default='{ row }'>
                      <el-tag :type="row.status == '0' ? 'primary' : 'success'">
                          {{ row.status == '0' ? '处理中' : '已处理' }}
                      </el-tag>
                  </template>
              </el-table-column>
              <el-table-column prop="create_time" label="最新更新时间" width="180">
                  <template #default='{ row }'>
                      <div>{{ row.create_time?.slice(0, 10) }}</div>
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                  <template #default="scope">
                      <el-button link type="primary" @click="handleDetail(scope.row)">
                          处理
                      </el-button>
                  </template>
              </el-table-column>
          </el-table>
      </div>
      <div class="table-footer">
          <el-pagination :page-size="10" :current-page="paginationData.currentPage" :pager-count="7"
              :total="paginationData.total" :page-count="paginationData.count" @current-change="currentChange"
              layout="prev, pager, next" />
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getFeedbackList, handleFeedback } from '@/api/feedback.js'
import { ElMessage } from 'element-plus'

const tableData = ref([])

const dialogVisible = ref(false)
const currentFeedback = ref({})
const resolveText = ref('')
const resolveId = ref('')

const handleDetail = (row: any) => {
  currentFeedback.value = row
  resolveId.value = row.id
  resolveText.value = ''
  dialogVisible.value = true
}

const handleResolve = async () => {
  const res = await handleFeedback(resolveId.value, resolveText.value)
  if (res.data.status === 0) {
      ElMessage.success(res.data.message)
  } else {
      ElMessage.error(res.data.message)
  }
  dialogVisible.value = false
  await getFirstPageList()
}
// 分页数据
const paginationData = reactive({
  total: 1,
  pageCount: 1,
  currentPage: 1,
})
// 获取公司公告列表的页数
const getListLength = async () => {
  const res = await getFeedbackList(1)
  paginationData.total = res.data.total
  paginationData.pageCount = Math.ceil(res.data.length / 10)
}
getListLength()
// 默认获取公司公告列表第一页的数据
const getFirstPageList = async () => {
  const res = await getFeedbackList(1)
  tableData.value = res.data.data
  paginationData.currentPage = 1
}
getFirstPageList()
// 公司公告列表监听换页
const currentChange = async (value: number) => {
  paginationData.currentPage = value
  const res = await getFeedbackList(paginationData.currentPage)
  tableData.value = res.data.data
}

</script>

<style scoped>
.feedback-list {
  padding: 20px;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}

.pane-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - 101px);
  background: #fff;

  .pane-top {
      .module-common-header {
          padding: 0 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .search-wrapped {
              display: flex;
          }

      }

      .module-common-table {
          min-height: 10px;
          padding: 10px 20px 20px;
          margin-bottom: 8px;
          background: #fff;
      }
  }

  .table-footer {
      display: flex;
      justify-content: flex-end;
      background: #fff;
  }

}
</style>